<template>
  <section class="product-details-section pt-100 pb-100">
    <div class="container">
      <div class="product-details-content">
        <div class="row align-items-center">
          <div class="col-12 col-lg-6 pb-30">
            <div class="product-details-item desk-pad-right-40">
              <div class="product-details-slider">
                <div class="product-slider-for swiper swiper2 gallery-grid">
                  <div class="swiper-wrapper" style="">
                    <div class="swiper-slide" style="">
                      <div class="item">
                        <div class="product-gallery-trigger">
                          <a
                            :href="
                              require('assets/images/products/product-13.png')
                            "
                            title="Stylish Chair"
                          >
                            <i class="flaticon-full-screen"> </i>
                          </a>
                        </div>
                        <img
                          :src="
                            require('assets/images/products/product-13.png')
                          "
                          alt="product"
                        />
                      </div>
                    </div>
                    <div class="swiper-slide" style="">
                      <div class="item">
                        <div class="product-gallery-trigger">
                          <a
                            :href="
                              require('assets/images/products/product-14.png')
                            "
                            title="Stylish Chair"
                            ><i class="flaticon-full-screen"></i
                          ></a>
                        </div>
                        <img
                          :src="
                            require('assets/images/products/product-14.png')
                          "
                          alt="product"
                        />
                      </div>
                    </div>
                    <div class="swiper-slide" style="">
                      <div class="item">
                        <div class="product-gallery-trigger">
                          <a
                            :href="
                              require('assets/images/products/product-12.png')
                            "
                            title="Stylish Chair"
                            ><i class="flaticon-full-screen"></i
                          ></a>
                        </div>
                        <img
                          :src="
                            require('assets/images/products/product-12.png')
                          "
                          alt="product"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="swiper-navigation disabled">
                    <button type="button" class="swiper-button-prev">
                      <i class="flaticon-back"></i>
                    </button>
                    <button type="button" class="swiper-button-next">
                      <i class="flaticon-next"></i>
                    </button>
                  </div>
                  <div class="swiper-pagination disabled"></div>
                </div>
                <div
                  thumbsSlider=""
                  class="product-slider-nav swiper swiper-nav"
                >
                  <div class="swiper-wrapper" style="">
                    <div class="swiper-slide" style="">
                      <div class="item">
                        <img
                          :src="
                            require('assets/images/products/product-13.png')
                          "
                          alt="product"
                        />
                      </div>
                    </div>
                    <div class="swiper-slide" style="">
                      <div class="item">
                        <img
                          :src="
                            require('assets/images/products/product-14.png')
                          "
                          alt="product"
                        />
                      </div>
                    </div>
                    <div class="swiper-slide" style="">
                      <div class="item">
                        <img
                          :src="
                            require('assets/images/products/product-12.png')
                          "
                          alt="product"
                        />
                      </div>
                    </div>
                  </div>

                  <div class="swiper-navigation disabled"></div>
                  <div class="swiper-pagination disabled"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-6 pb-30">
            <div class="product-details-item">
              <div
                class="product-details-caption product-details-caption-secondcolor"
              >
                <h3>{{ product.title }}</h3>
                <p class="product-id">{{ product.code }}</p>
                <div class="review-star-group">
                  <ul class="review-star">
                    <li class="full-star"><i class="flaticon-star"></i></li>
                    <li class="full-star"><i class="flaticon-star"></i></li>
                    <li class="full-star"><i class="flaticon-star"></i></li>
                    <li class="full-star"><i class="flaticon-star"></i></li>
                    <li class="full-star"><i class="flaticon-star"></i></li>
                  </ul>
                  <span>(4.5 Reviews)</span>
                </div>
                <div class="product-price">
                  {{ product.currentPrice }}
                  <del>{{ product.originalPrice }}</del>
                </div>
                <div class="product-details-para">
                  <p>
                    {{ product.description }}
                  </p>
                </div>
                <div class="product-choice">
                  <div class="product-choice-item">
                    <label>Select Colors</label>
                    <select class="form-control product-color" style="">
                      <option value="1">Available colors</option>
                      <option value="2">Blue</option>
                      <option value="3">Green</option>
                    </select>
                  </div>
                  <div class="product-choice-item">
                    <label>Select Amount</label>
                    <div class="cart-quantity">
                      <button
                        class="qu-btn dec deact"
                        @click="clickQuantityBtn('dec')"
                      >
                        -
                      </button>
                      <input type="text" class="qu-input" :value="quantity" />
                      <button
                        class="qu-btn inc deact"
                        @click="clickQuantityBtn('inc')"
                      >
                        +
                      </button>
                    </div>
                  </div>
                </div>
                <div class="product-action">
                  <div class="product-action-item">
                    <a
                      href="javascript:;"
                      class="btn main-btn main-btn-secondary"
                      @click="addCart(product, quantity)"
                    >
                      Add To Cart
                    </a>
                  </div>
                  <div class="product-action-item">
                    <a
                      href="javascript:;"
                      class="btn main-btn main-btn-secondary main-btn-bgless main-btn-secondary-bgless"
                      @click="addWish(product, quantity)"
                    >
                      <i class="flaticon-like"></i>
                    </a>
                  </div>
                </div>
                <div class="share-post">
                  <h4>Share:</h4>
                  <ul class="social-list social-list-secondcolor">
                    <li>
                      <a href="javascript:;"
                        ><i class="flaticon-facebook"></i
                      ></a>
                    </li>
                    <li>
                      <a href="javascript:;"
                        ><i class="flaticon-instagram"></i
                      ></a>
                    </li>
                    <li>
                      <a href="javascript:;"
                        ><i class="flaticon-twitter"></i
                      ></a>
                    </li>
                    <li>
                      <a href="javascript:;"
                        ><i class="flaticon-pinterest"></i
                      ></a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--  -->
        <div class="product-details-tab">
          <ul class="product-tab-list">
            <li class="active" data-product-tab="1">Description</li>
            <li data-product-tab="2" class="">Reviews</li>
          </ul>
          <div class="product-tab-information">
            <div
              class="product-tab-information-item active"
              data-product-details-tab="1"
            >
              <div class="product-description">
                <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                  diam nonumy eirmod tey mpor invidunt ut labore et dolore magna
                  aliquyam erat, sed diam voluptua. At veropei eos et accu sam
                  et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                  no sea tak imata sanctus est Lorem ipsum dolor sit amet. Lorem
                  ipsum dolor sit amet, conset.
                </p>
                <ul>
                  <li>Lorem ipsum dolor sit amet, consete.</li>
                  <li>Ture sadipscing elitr, sed diam.</li>
                  <li>Nonumy eirmo od tey mpor invidunt.</li>
                  <li>Uti labore et dolorer magna aliqu.</li>
                  <li>Erat, sed diam voluptui. At veropei.</li>
                </ul>
                <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                  diam nonumy eirmod tey mpor invidunt ut labore et dolore magna
                  aliquyam erat, sed diam voluptua.
                </p>
              </div>
            </div>
            <div
              class="product-tab-information-item"
              data-product-details-tab="2"
            >
              <div class="max-455 ms-auto me-auto">
                <div class="product-review-box">
                  <div class="post-review-box mb-30">
                    <div class="review-holder-item">
                      <div class="post-review-item post-review-item-main">
                        <div class="post-review-thumb">
                          <img
                            src="assets/images/blogs/blog-author-1.jpg"
                            alt="user"
                          />
                        </div>
                        <div class="post-review-content">
                          <div class="post-review-content-header">
                            <div class="post-review-header-item">
                              <h3>Jennifer Andrew</h3>
                              <ul class="review-star">
                                <li class="full-star">
                                  <i class="flaticon-star"></i>
                                </li>
                                <li class="full-star">
                                  <i class="flaticon-star"></i>
                                </li>
                                <li class="full-star">
                                  <i class="flaticon-star"></i>
                                </li>
                                <li class="full-star">
                                  <i class="flaticon-star"></i>
                                </li>
                                <li class="full-star">
                                  <i class="flaticon-star"></i>
                                </li>
                              </ul>
                              <p>3 weeks ago</p>
                            </div>
                            <div class="post-review-header-item">
                              <a href="#" class="post-review-btn">Reply</a>
                            </div>
                          </div>
                          <p>
                            Lorem ipsum dolor sit amet, consetetur sa dipscing
                            elitr, sed diam nonumy ser irmodey tey mporep
                            invidunt ut laboredi et dolore ma gna aliquyam.
                          </p>
                        </div>
                      </div>
                    </div>
                    <div class="review-holder-item">
                      <div class="post-review-item post-review-item-main">
                        <div class="post-review-thumb">
                          <img
                            src="assets/images/blogs/blog-author-3.jpg"
                            alt="review"
                          />
                        </div>
                        <div class="post-review-content">
                          <div class="post-review-content-header">
                            <div class="post-review-header-item">
                              <h3>Robert John</h3>
                              <ul class="review-star">
                                <li class="full-star">
                                  <i class="flaticon-star"></i>
                                </li>
                                <li class="full-star">
                                  <i class="flaticon-star"></i>
                                </li>
                                <li class="full-star">
                                  <i class="flaticon-star"></i>
                                </li>
                                <li class="full-star">
                                  <i class="flaticon-star"></i>
                                </li>
                                <li class="full-star">
                                  <i class="flaticon-star"></i>
                                </li>
                              </ul>
                              <p>3 weeks ago</p>
                            </div>
                            <div class="post-review-header-item">
                              <a href="#" class="post-review-btn">Reply</a>
                            </div>
                          </div>
                          <p>
                            Lorem ipsum dolor sit amet, consetetur sa dipscing
                            elitr, sed diam nonumy ser irmodey tey mporep
                            invidunt ut laboredi et dolore ma gna aliquyam.
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="post-comment-area">
                    <div class="sub-section-title">
                      <h2 class="sub-section-title-heading">Leave A Review</h2>
                    </div>
                    <form
                      class="contact-form"
                      id="contactForm"
                      novalidate="true"
                    >
                      <div class="star-rating mb-20">
                        <input
                          type="radio"
                          id="5-stars"
                          name="rating"
                          value="5"
                        />
                        <label for="5-stars" class="star"></label>
                        <input
                          type="radio"
                          id="4-stars"
                          name="rating"
                          value="4"
                        />
                        <label for="4-stars" class="star"></label>
                        <input
                          type="radio"
                          id="3-stars"
                          name="rating"
                          value="3"
                        />
                        <label for="3-stars" class="star"></label>
                        <input
                          type="radio"
                          id="2-stars"
                          name="rating"
                          value="2"
                        />
                        <label for="2-stars" class="star"></label>
                        <input
                          type="radio"
                          id="1-star"
                          name="rating"
                          value="1"
                        />
                        <label for="1-star" class="star"></label>
                      </div>
                      <div class="row">
                        <div class="col-sm-6">
                          <div class="form-group mb-20">
                            <input
                              type="text"
                              name="name"
                              id="name"
                              class="form-control form-control-borderbg form-control-borderbg-secondcolor"
                              placeholder="Your name*"
                              required=""
                              data-error="Please enter your name"
                            />
                            <div class="help-block with-errors"></div>
                          </div>
                        </div>
                        <div class="col-sm-6">
                          <div class="form-group mb-20">
                            <input
                              type="text"
                              name="email"
                              id="email"
                              class="form-control form-control-borderbg form-control-borderbg-secondcolor"
                              placeholder="Your email*"
                              required=""
                              data-error="Please enter your email"
                            />
                            <div class="help-block with-errors"></div>
                          </div>
                        </div>
                        <div class="col-sm-12">
                          <div class="form-group mb-20">
                            <textarea
                              name="message"
                              class="form-control form-control-borderbg form-control-borderbg-secondcolor"
                              id="message"
                              rows="6"
                              placeholder="Your comment*"
                            ></textarea>
                          </div>
                        </div>
                      </div>
                      <div
                        class="input-checkbox input-checkbox-secondcolor mb-20"
                      >
                        <input type="checkbox" id="contact1" />
                        <label for="contact1"
                          >Save my name and email in this browser for the next
                          time I comment.</label
                        >
                      </div>
                      <div class="form-button">
                        <button
                          class="btn main-btn main-btn-secondary"
                          type="submit"
                          style="pointer-events: all; cursor: pointer"
                        >
                          Send A Review
                        </button>
                        <div id="msgSubmit"></div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--  -->
  <section class="related-product-section pb-100">
    <div class="container">
      <div
        class="product-info-header product-info-header-two product-info-header-borderless"
      >
        <h2>Related Product</h2>
        <div class="carousel-control-arrows">
          <button class="product-control-left carousel-control-arrow">
            <i class="flaticon-back"></i>
          </button>
          <button class="product-control-right carousel-control-arrow">
            <i class="flaticon-next"></i>
          </button>
        </div>
      </div>
      <div class="product-carousel swiper related-product-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="product-card-two product-card-two-secondcolor">
                <div class="product-card-thumb">
                  <a :href="'/shop/shop-single'">
                    <img
                      :src="require('assets/images/products/product-16.png')"
                      alt="product"
                    />
                  </a>
                  <ul class="product-card-action">
                    <li>
                      <a href="#">
                        <i class="flaticon-shopping-cart"></i>
                      </a>
                    </li>
                    <li>
                      <a href="#" class="quick-view-trigger">
                        <i class="flaticon-visibility"></i>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <i class="flaticon-like"></i>
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="product-card-content">
                  <h3><a :href="'/shop/shop-single'">Wooden Light </a></h3>
                  <p class="product-id">R24HER324</p>
                  <div class="product-price">$120.0 <del>$150.0</del></div>
                </div>
                <div class="product-status product-status-purple">New</div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="product-card-two product-card-two-secondcolor">
                <div class="product-card-thumb">
                  <a :href="'/shop/shop-single'">
                    <img
                      :src="require('assets/images/products/product-1.png')"
                      alt="product"
                    />
                  </a>
                  <ul class="product-card-action">
                    <li>
                      <a href="#">
                        <i class="flaticon-shopping-cart"></i>
                      </a>
                    </li>
                    <li>
                      <a href="#" class="quick-view-trigger">
                        <i class="flaticon-visibility"></i>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <i class="flaticon-like"></i>
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="product-card-content">
                  <h3><a :href="'/shop/shop-single'">Photo Shoot Lamp </a></h3>
                  <p class="product-id">M43HG435</p>
                  <div class="product-price">$250.0 <del>$370.0</del></div>
                </div>
                <div class="product-status product-status-thirdcolor">-15%</div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="product-card-two product-card-two-secondcolor">
                <div class="product-card-thumb">
                  <a :href="'/shop/shop-single'">
                    <img
                      :src="require('assets/images/products/product-17.png')"
                      alt="product"
                    />
                  </a>
                  <ul class="product-card-action">
                    <li>
                      <a href="#">
                        <i class="flaticon-shopping-cart"></i>
                      </a>
                    </li>
                    <li>
                      <a href="#" class="quick-view-trigger">
                        <i class="flaticon-visibility"></i>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <i class="flaticon-like"></i>
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="product-card-content">
                  <h3><a :href="'/shop/shop-single'">Hanging Chair </a></h3>
                  <p class="product-id">M43HG435</p>
                  <div class="product-price">$280.0 <del>$290.0</del></div>
                </div>
                <div class="product-status product-status-purple">New</div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="product-card-two product-card-two-secondcolor">
                <div class="product-card-thumb">
                  <a :href="'/shop/shop-single'">
                    <img
                      :src="require('assets/images/products/product-18.png')"
                      alt="product"
                    />
                  </a>
                  <ul class="product-card-action">
                    <li>
                      <a href="#">
                        <i class="flaticon-shopping-cart"></i>
                      </a>
                    </li>
                    <li>
                      <a href="#" class="quick-view-trigger">
                        <i class="flaticon-visibility"></i>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <i class="flaticon-like"></i>
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="product-card-content">
                  <h3>
                    <a :href="'/shop/shop-single'">Simple Dining Table</a>
                  </h3>
                  <p class="product-id">R23HY45</p>
                  <div class="product-price">$330.0 <del>$370.0</del></div>
                </div>
                <div class="product-status product-status-purple">Sold</div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="product-card-two product-card-two-secondcolor">
                <div class="product-card-thumb">
                  <a :href="'/shop/shop-single'">
                    <img
                      :src="require('assets/images/products/product-6.png')"
                      alt="product"
                    />
                  </a>
                  <ul class="product-card-action">
                    <li>
                      <a href="#">
                        <i class="flaticon-shopping-cart"></i>
                      </a>
                    </li>
                    <li>
                      <a href="#" class="quick-view-trigger">
                        <i class="flaticon-visibility"></i>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <i class="flaticon-like"></i>
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="product-card-content">
                  <h3><a :href="'/shop/shop-single'">Mini High Table </a></h3>
                  <p class="product-id">M43HG435</p>
                  <div class="product-price">$120.0 <del>$150.0</del></div>
                </div>
                <div class="product-status product-status-purple">Sold</div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="product-card-two product-card-two-secondcolor">
                <div class="product-card-thumb">
                  <a :href="'/shop/shop-single'">
                    <img
                      :src="require('assets/images/products/product-11.png')"
                      alt="product"
                    />
                  </a>
                  <ul class="product-card-action">
                    <li>
                      <a href="#">
                        <i class="flaticon-shopping-cart"></i>
                      </a>
                    </li>
                    <li>
                      <a href="#" class="quick-view-trigger">
                        <i class="flaticon-visibility"></i>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <i class="flaticon-like"></i>
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="product-card-content">
                  <h3><a :href="'/shop/shop-single'">Affordable Chair </a></h3>
                  <p class="product-id">N23GH345</p>
                  <div class="product-price">$220.0 <del>$250.0</del></div>
                </div>
                <div class="product-status product-status-thirdcolor">New</div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-navigation disabled">
          <button type="button" class="swiper-button-prev">
            <i class="flaticon-back"></i>
          </button>
          <button type="button" class="swiper-button-next">
            <i class="flaticon-next"></i>
          </button>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { useShopStore } from "src/stores/shop";
const shopStore = useShopStore();

import Swiper, {
  Navigation,
  Pagination,
  Scrollbar,
  Controller,
  Thumbs,
} from "swiper";
import "swiper/css";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  computed,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({
  quantity: 1,
  product: {},
});
const { quantity, product } = toRefs(data);

onBeforeMount(() => {
  if (
    proxy.$route.params.product == undefined ||
    !proxy.$route.params.product
  ) {
    proxy.$jumpLink("/shop");
  }
  console.log(proxy.$route.params.product);
  data.product = JSON.parse(proxy.$route.params.product);
});
onMounted(() => {
  initSwiper();

  $(".product-tab-list li").on("click", function () {
    var tab_modal = $(this).attr("data-product-tab");
    $(this).addClass("active").siblings().removeClass("active");
    $(
      ".product-tab-information-item[data-product-details-tab=" +
        tab_modal +
        "]"
    )
      .addClass("active")
      .siblings()
      .removeClass("active");
  });
});

// 自定义法方法
// 初始化swiper
const initSwiper = () => {
  var swiperNav = new Swiper(".swiper-nav", {
    modules: [Navigation, Pagination, Scrollbar, Controller],
    loop: false,
    spaceBetween: 10,
    slidesPerView: 3,
    freeMode: true,
    watchSlidesProgress: true,
  });

  var swiper2 = new Swiper(".swiper2", {
    modules: [Navigation, Pagination, Scrollbar, Controller, Thumbs],
    loop: false,
    spaceBetween: 10,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    thumbs: {
      swiper: swiperNav,
    },
  });

  //bestSellerCarousel
  var productCarousel = new Swiper(".related-product-swiper", {
    modules: [Navigation, Pagination, Controller],
    slidesPerView: 4,

    loop: true,
    autoplay: {
      delay: 2000,
      disableOnInteraction: false,
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    //
    breakpoints: {
      576: {
        slidesPerView: 1,
        spaceBetween: 10,
        slidesPerGroup: 1,
      },
      768: {
        slidesPerView: 2,
        spaceBetween: 10,
        slidesPerGroup: 2,
      },
      992: {
        slidesPerView: 4,
        spaceBetween: 10,
        slidesPerGroup: 4,
      },
    },
    //
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
    observeParents: true, //修改swiper的父元素时，自动初始化swiper
  });

  $(".product-control-left").on("click", function () {
    productCarousel.slidePrev();
  });
  $(".product-control-right").on("click", function () {
    productCarousel.slideNext();
  });
};

const clickQuantityBtn = (type) => {
  if (type == "inc") {
    data.quantity++;
  } else {
    if (data.quantity <= 1) {
      return;
    }
    data.quantity--;
  }
};

const addCart = (product, quantity) => {
  var cartProduct = {
    ...product,
    quantity: quantity,
  };
  shopStore.addCart(cartProduct);
};

const addWish = (product, quantity) => {
  var newProduct = {
    ...product,
    quantity: quantity,
  };
  shopStore.addWish(newProduct);
};
</script>
<style lang="scss" scoped>
.swiper2 {
  .swiper-navigation button {
    width: 40px;
    height: 40px;
    border: 1px solid #4f5ac2;
    // color: #555555;
    border-radius: 0;
    font-size: 13px;
    transition: all 0.3s linear;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;
    z-index: 10;
  }

  .swiper-navigation button.swiper-button-prev {
    left: 10px;
  }
  .swiper-navigation button.swiper-button-next {
    right: 10px;
  }
}

.product-carousel {
  position: static;

  .swiper-navigation button {
    width: 40px;
    height: 40px;
    border: 1px solid #4f5ac2;
    // color: #555555;
    border-radius: 0;
    font-size: 13px;
    transition: all 0.3s linear;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;

    z-index: 10;
  }

  .swiper-navigation button.swiper-button-prev {
    left: -20px;
  }
  .swiper-navigation button.swiper-button-next {
    right: -20px;
  }
}
</style>
